import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/audio_provider.dart';
import '../config/app_theme.dart';

/// 音频播放器组件（详情页完整版）
class AudioPlayerWidget extends StatefulWidget {
  const AudioPlayerWidget({super.key});

  @override
  State<AudioPlayerWidget> createState() => _AudioPlayerWidgetState();
}

class _AudioPlayerWidgetState extends State<AudioPlayerWidget> {
  bool _showRateMenu = false;
  final List<double> _rateOptions = [0.8, 1.0, 1.25, 1.5, 2.0];

  @override
  Widget build(BuildContext context) {
    return Consumer<AudioProvider>(
      builder: (context, provider, child) {
        if (provider.currentArticle == null) {
          return const SizedBox.shrink();
        }

        return Container(
          decoration: BoxDecoration(
            color: const Color(0xFF1C1C1E).withOpacity(0.95),
            border: const Border(
              top: BorderSide(color: AppTheme.borderColor, width: 1),
            ),
          ),
          padding: const EdgeInsets.all(20).copyWith(
            bottom: 20 + MediaQuery.of(context).padding.bottom,
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // 进度条
              SliderTheme(
                data: SliderTheme.of(context).copyWith(
                  trackHeight: 4,
                  thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 8),
                  overlayShape: const RoundSliderOverlayShape(overlayRadius: 16),
                ),
                child: Slider(
                  value: provider.currentTime.inMilliseconds.toDouble(),
                  min: 0,
                  max: provider.duration.inMilliseconds.toDouble(),
                  onChanged: (value) {
                    provider.seekTo(Duration(milliseconds: value.toInt()));
                  },
                  activeColor: AppTheme.primaryColor,
                  inactiveColor: AppTheme.borderColor,
                ),
              ),
              
              // 时间显示
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 4),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      provider.formattedCurrentTime,
                      style: const TextStyle(
                        color: AppTheme.textSecondary,
                        fontSize: 12,
                      ),
                    ),
                    Text(
                      provider.formattedDuration,
                      style: const TextStyle(
                        color: AppTheme.textSecondary,
                        fontSize: 12,
                      ),
                    ),
                  ],
                ),
              ),
              
              const SizedBox(height: 16),
              
              // 控制按钮
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  // 左侧占位
                  const SizedBox(width: 60),
                  
                  // 中间控制按钮
                  Expanded(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        // 快退30秒
                        _buildControlButton(
                          icon: Icons.replay,
                          label: '30s',
                          onPressed: () {
                            provider.seekTo(
                              provider.currentTime - const Duration(seconds: 30),
                            );
                          },
                        ),
                        
                        const SizedBox(width: 32),
                        
                        // 播放/暂停
                        GestureDetector(
                          onTap: provider.togglePlay,
                          child: Container(
                            width: 60,
                            height: 60,
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              gradient: AppTheme.primaryGradient,
                              boxShadow: [
                                BoxShadow(
                                  color: AppTheme.primaryColor.withOpacity(0.4),
                                  blurRadius: 16,
                                  spreadRadius: 0,
                                ),
                              ],
                            ),
                            child: Icon(
                              provider.isPlaying ? Icons.pause : Icons.play_arrow,
                              color: Colors.white,
                              size: 32,
                            ),
                          ),
                        ),
                        
                        const SizedBox(width: 32),
                        
                        // 快进30秒
                        _buildControlButton(
                          icon: Icons.replay,
                          label: '30s',
                          iconRotate: true,
                          onPressed: () {
                            provider.seekTo(
                              provider.currentTime + const Duration(seconds: 30),
                            );
                          },
                        ),
                      ],
                    ),
                  ),
                  
                  // 右侧占位（隐藏播放速度）
                  const SizedBox(width: 60),
                ],
              ),
              
              // 播放速度菜单（临时隐藏）
            ],
          ),
        );
      },
    );
  }

  Widget _buildControlButton({
    required IconData icon,
    String? label,
    bool iconRotate = false,
    required VoidCallback onPressed,
  }) {
    return GestureDetector(
      onTap: onPressed,
      child: SizedBox(
        width: 40,
        child: Column(
          children: [
            Transform(
              alignment: Alignment.center,
              transform: iconRotate ? Matrix4.rotationY(3.14159) : Matrix4.identity(),
              child: Icon(
                icon,
                color: AppTheme.textSecondary,
                size: 24,
              ),
            ),
            if (label != null) ...[
              const SizedBox(height: 4),
              Text(
                label,
                style: const TextStyle(
                  color: AppTheme.textTertiary,
                  fontSize: 10,
                ),
              ),
            ],
          ],
        ),
      ),
    );
  }
}

